<!DOCTYPE HTML>
<html  lang="zh-CN">
  <head>
    <title>小技巧</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../bootstrap/js/jquery-3.1.0.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style type="text/css">

      /*公共部分*/
      hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
      }

      h1,h2,h3,h4,h5{
        text-align: center;
      }

      ul{
        list-style-type: none;
      }

      /*使用table-cell实现自适应布局*/
      .box{width:60%; margin:60px auto 0; padding:20px; background:#e5e5e5;}
      .content{display:table-cell; *display:inline-block;width: 2000px}
      .mr10{
        margin-right: 10px;
      }

      /*图片垂直居中-background-position*/
      .img-vert-center{
        list-style: none;
        margin: 0;
        padding: 0;

        font-size: 128px;/*通过字体大小控制居中*/
      }

      .img-vert-center li{
        box-sizing: content-box;
        float: left;

        border: 1px solid #beceeb;
        padding: 0.1em;
        width: 1em;
        height: 1em;
        line-height: 1em;
        margin: 0px 0.1em 0.1em 0px;

      }
      .img-vert-center li img{
        display: block;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
      }

      /*图片垂直居中-table-cell*/
      .img-vert-center2{
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .img-vert-center2 li{
        box-sizing: content-box;
        float: left;
        width: 144px;
        height: 144px;
        line-height: 144px;
        margin: 0px 10px 10px 0px;
        border: 1px solid #beceeb;
        padding: 10px;

        text-align: center;
      }

      .img-vert-center2-1 li{
        box-sizing: content-box;
        float: left;
        margin: 0px 10px 10px 0px;
      }
      .img-vert-center2-1 li div{
        box-sizing: content-box;
        width: 144px;
        height: 144px;
        display: table-cell;
        border: 1px solid #beceeb;
        padding: 10px;

        text-align: center;
        vertical-align: middle;
      }


      .img-vert-center2-2{
        line-height: 144px;
        text-align: center;
      }
      .img-vert-center2-2 a{
        display: inline-block;
        border: 1px solid #beceeb;
        width: 144px;
      }
    </style>
    <script type="text/javascript">
      $(function(){
      });
    </script>
  </head>
  <body>
  <div class="container well">
    <!--等高布局-->
    <h2><a href="http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/">使用table-cell实现等高布局</a></h2>
    <div style="display:table-row">
      <div style="background-color:green;display: table-cell;width:33%;">adfsdfffffff<br>sdfasdfadsf</div>
      <div style="background-color:red;display: table-cell;width:33%;"><p class="mt5">微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？</p></div>
      <div style="background-color:blue;display: table-cell;width:33%;">
        <input style="width: 100%;height: 100%;" value="sfdfsf">
      </div>
    </div>
    <hr>
    <h2><a href="http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/">使用table-cell实现自适应布局</a></h2>
    <div class="box clearfix">
      <a href="#prettyGirl" class="pull-left mr10"><img border="0" src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></a>
      <div class="content">
        <p><a href="#prettyGirl">大美女一枚</a> 来自上海</p>
        <p class="mt5">签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>
        <p class="mt5">微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？</p>
      </div>
    </div>

    <hr>

    <h1><a href="http://mossad.iteye.com/blog/2153675"></a>CSS实现垂直居中的五种方法</h1>
    <h2>1. table-cell 高度无需固定</h2>
    <div style="display: table;background-color:#e5e5e5;height:100px; ">
      <div style="display: table-cell; vertical-align: middle; ">
        <div class="content">Content goes here</div>
      </div>
    </div>


    <h2>2. absolute top&margin-top 高度必须固定</h2>
    <div style="position:relative;display: table;background-color:#e5e5e5;height:100px; width: 100%;">
      <div style="position: absolute;top:50%;margin-top: -25px;height: 50px;width:100%;background-color: #2aabd2;overflow: scroll;"></div>
    </div>

    <h2>3. 使用float 高度必须固定</h2>
    <div style="position:relative;display: table;background-color:#e5e5e5;height:100px; width: 100%;">
      <div style="float: left;height: 50%; margin-bottom: -25px;"></div>
      <div style="clear: both;height: 50px;position: relative;background-color: #2aabd2">Content here</div>
    </div>

    <h2>4. absolute margin:auto 高度必须固定</h2>
    <div style="position:relative;display: table;background-color:#e5e5e5;height:100px; width: 100%;">
      <div style="position: absolute;top:0;bottom:0;left:0;right:0;margin: auto;height:50px;background-color: #2aabd2;overflow: scroll;">Content here</div>
    </div>

    <h2>5. 使用line-height居中单行文字</h2>
    <div style="height: 100px;line-height: 100px;background-color:#e5e5e5;">Content here</div>


    <hr>
    <h2>多行文字垂直居中</h2>
    <div style="height: 400px;background-color:#e5e5e5;display: table-cell;vertical-align: middle">
      <div style="display:inline-block;background-color: #2ecc71">
        Content here<br>
        Content here<br>
        <span style="display: none;">ddfsdfsd</span>
      </div>
    </div>

    <hr>
    <h2>图片垂直居中-使用background-position</h2>

    <ul class="img-vert-center clearfix">
      <li><img src="images/pixel.gif" style="background-image: url(images/mm1.jpg)"></li>
      <li>
        <img src="images/pixel.gif" style="background-image: url(images/mm2.jpg)">
      </li>
      <li>
        <img src="images/pixel.gif" style="background-image: url(images/mm3.jpg)">
      </li>
    </ul>


    <hr>
    <h2>图片垂直居中-使用line-height使图片居中</h2>

    <ul class="img-vert-center2 clearfix">
      <li>x<img src="images/mm1.jpg"></li>
      <li>
        <img src="images/mm2.jpg">
      </li>
      <li>
        <img src="images/mm3.jpg">
      </li>
    </ul>

    <h2>图片垂直居中-使用table-cell使图片居中</h2>
    <ul class="img-vert-center2-1 clearfix">
      <li>
        <div><img src="images/mm1.jpg"></div>
      </li>
      <li>
        <div><img src="images/mm2.jpg"></div>
      </li>
      <li>
        <div><img src="images/mm3.jpg"></div>
      </li>
    </ul>

    <h2>图片垂直居中-inline-block+line-height</h2>
    <div class="img-vert-center2-2">
      <a><img src="images/mm1.jpg" /></a>
      <a><img src="images/mm2.jpg" /></a>
      <a><img src="images/mm3.jpg" /></a>
    </div>

    <p>说明：流式布局时，line-height对应行区域总是在父元素中靠上布局（父元素是table-cell除外），行区域内的元素可以通过vertical-align(<b>在行内元素上设置</b>)进行垂直定位，也就是说行内元素可以在行高范围内上下移动，但前提是line-height要大于行内元素的高度</p>
    <p>vertical-align对于table-cell来说(<b>在父元素cell上设置</b>)可以居中cell内的流或块元素，即对子元素定位，对于其他元素来说，是自身在line-height(即行区域)中的垂直定位</p>
    <b>table-cell不能与float或absolute定位同时使用</b>

  </div>
  </body>
</html>